<template>
  <div class="device_template">
    <one-title title="设备安全记录模板" @refreshData="refresh"></one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        @searchInfo="_info"
        ref="mesSearch"
        :searchList="tableColConfig"
        :searchResult="searchResult">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          ref="mesTable"
          border
          stripe
          v-loading="isLoading"
          style="width: 100%"
          :data="listData.list"
          :max-height="tableMaxHeight"
          @sort-change="_sort">
          <mes-col-comp
            v-for="(column,index) in columnList"
            :key="index"
            :column="column">
          </mes-col-comp>
          <el-table-column
            label="操作"
            :resizable="false"
            align="center"
            fixed="right"
            min-width="100"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="jump_item"
                    @click="showFileDialog(scope.row)">上传</span>
              <span class="jump_item"
                    :class="{disable_icon: !scope.row.uploadTemplateId}" @click="down(scope.row)">下载</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
    <upload-dialog ref="uploadDialog" @uploadSuccess="init"></upload-dialog>
  </div>
</template>

<script>
import uploadDialog from './components/uploadDialog'
import tableColumn from './tableColumn'

export default {
  name: 'DeviceTemplate',
  components: {
    uploadDialog,
  },
  data() {
    return {
      // 列配置
      tableColConfig: tableColumn,
      // 加载中
      isLoading: false,
      // 搜索参数
      searchData: {},
      // 排序参数
      sortData: {},
      // 搜索结果数
      searchResult: NaN,
    }
  },
  computed: {
    // 获取列表数据
    listData() {
      return this.$store.state.deviceTemplate.listData
    },
    // 列循环
    columnList() {
      return this.tableColConfig.filter(item => item.noForCol !== true && item.isShow !== false)
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 刷新
    refresh() {
      this.$refs.mesSearch.clean()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 初始化
    init(page) {
      let postData = {
        method: 'post',
        url: 'a/device/device/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : this.listData.pageSize || 15,
          query: {
            delFlag: 0
          }
        },
        module: 'deviceTemplate',
        state: 'listData'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 排序
    _sort(item) {
      this.sortData = this.$getSortOrder(item)
      this.init()
    },
    // 下载
    down(row) {
      if (row.uploadTemplateId) this.$downByBlob(row.uploadTemplateId, row.fileName)
    },
    // 打开选择文件弹框
    showFileDialog(row) {
      this.$refs.uploadDialog.openDialog(row.id)
    },
  }
}
</script>

<style scoped lang="less">
  .device_template {
    .jump_item {
      margin: 0 10px;
      font-size: 14px;
      cursor: pointer;

      &.disable_icon {
        color: #7e8e9f;
        cursor: not-allowed;
      }
    }
  }
</style>
